import {
    Geometry, Mesh, ShaderMaterial, TSVector2, TextureLoader, TwinSpace2D,
} from "twinspace2d";
import noise1Frag from "./shader/noise1.frag";
import noise1Vert from "./shader/noise1.vert";

const N2D = new TwinSpace2D("noise2d");
const geometry = new Geometry();
const width = N2D.canvas.clientWidth;
const height = N2D.canvas.clientHeight;
geometry.setAttribute("u_position", new Float32Array([0, 0, width, 0, width, height, width, height, 0, height, 0, 0,]), 2);

geometry.setAttribute("uv", new Float32Array([0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0]), 2);

const material = new ShaderMaterial({
    uniforms: {
        u_resolution: {
            value: new TSVector2(N2D.canvas.clientWidth, N2D.canvas.clientHeight),
        }, u_texture: {
            // value: new TextureLoader().load("/public/demo2.jpg", (map) => {
            //   map.repeat = "repeat";
            // }),
        },
        u_ratio: {
            value: new TSVector2(1, 1),
        }, times: {
            value: 0,
        },
    }, fragmentShader: noise1Frag, vertexShader: noise1Vert,
});

const mesh = new Mesh(geometry, material);

N2D.scene.add(mesh);

window.addEventListener("resize", () => {
    material.uniforms.u_resolution.value = new TSVector2(N2D.canvas.clientWidth, N2D.canvas.clientHeight);

    material.uniforms.u_ratio.value = new TSVector2(width / N2D.canvas.clientWidth, height / N2D.canvas.clientHeight);
});

const render = () => {
    material.uniforms.times.value += 0.01;
    requestAnimationFrame(render);
    N2D.render();
};

render();
